<template>
  <div>
    <my-head title="影院" :back="false"></my-head>
    <div class="menu">
      <van-dropdown-menu>
        <van-dropdown-item :title="areas[current].name" ref="item">
          <div class="alist">
            <div
              class="aitem"
              @click="changeList(l, i)"
              :class="current == i ? 'active' : ''"
              v-for="(l, i) in areas"
              :key="i"
            >
              {{ l.name }}
            </div>
          </div>
        </van-dropdown-item>
        <van-dropdown-item
          v-model="value"
          :options="option"
          @change="priceSort"
        />
      </van-dropdown-menu>
    </div>
    <mlist :list="list"></mlist>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      cinemas: [],
      value: 0,
      option: [
        { text: "价格排序", value: 0 },
        { text: "价格升序", value: 1 },
        { text: "价格降序", value: 2 },
      ],
      list: [],
      areas: [
        {
          name: "全程",
          id: 0,
        },
      ],
    };
  },
  methods: {
    changeList(l, i) {
      this.current = i;
      this.$refs.item.toggle();
      if (i == 0) {
        this.list = [...this.allCinemas];
      } else {
        this.list = this.allCinemas.filter(
          item=> item.districtName == l.name
        );
        if (this.value == 1) {
          this.list.sort(this.priceAsc);
        } else {
          this.list.sort(this.priceDesc);
        }
      }
    },
    priceDesc(a, b) {
      return b["lowPrice"] - a["lowPrice"];
    },
    priceAsc(a, b) {
      return a["lowPrice"] - b["lowPrice"];
    },
    priceSort(value) {
      if (value == 0) {
        if (this.current == 0) {
          this.list = [...this.allCinemas];
        } else {
          this.list = [
            ...this.allCinemas.filter(
              (item) => item.districtName == this.areas[this.current].name
            ),
          ];
        }
      } else if (value == 1) {
        this.list.sort(this.priceAsc);
      } else {
        this.list.sort(this.priceDesc);
      }
    },
    async getCinemas() {
      let { data } = await this.$ajax.getMZdata(
        {
          cityId: this.city.cityId,
        },
        {
          "X-Host": "mall.film-ticket.cinema.list",
        }
      );
      this.list = data.cinemas;
      this.changeAllCinemas(data.cinemas);

      var obj = {};
      for (var i = 0; i < data.cinemas.length; i++) {
        var item = data.cinemas[i];
        if (!obj[item.districtName]) {
          obj[item.districtName] = item.districtName;
          this.areas.push(item.district);
        }
      }
    },
  },
  mounted() {
    if (this.city) {
      this.getCinemas();
    } else {
      this.$dialog
        .alert({
          title: "选择城市",
          message: "请选择你当前所在的城市",
        })
        .then(() => {
          this.$touter.push({
            name: "city",
          });
        });
    }
  },
};
</script>

<style lang="scss" scoped>
.alist {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 10px 0 0 0;
  margin: 0 0 0 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-line-pack: center;
  align-content: center;
  .aitem {
    font-size: 12px;
    display: inline-block;
    width: calc(25vw - 12.5px);
    margin: 0 10px 10px 0;
    height: 40px;
    text-align: center;
    line-height: 40px;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    border: 0.5px solid #ededed;
    border-radius: 5px;
  }
  .active {
    border: 0.5px solid #ff5f16;
    color: #ff5f16;
  }
}
</style>
